<template>
    <div class="age-range-list-page">
        <el-card shadow="never" class="mt-4">
            <el-button type="primary" @click="onAddClick">新增</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column align="center" label="ID" prop="id"></el-table-column>
                    <el-table-column align="center" label="管理员名称" prop="name"></el-table-column>
                    <el-table-column align="center" label="管理员账号" prop="account"></el-table-column>
                    <el-table-column align="center" label="管理员登录密码">
                        <template slot-scope="{row}">
                            {{ showPlainPwd(row.plain_psw) }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建者名称" prop="admin_account">
                        <template slot-scope="{row}">
                            {{ row.admin_account ? row.admin_account : 'admin' }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="是否冻结">
                        <template slot-scope="{row}">
                            {{ row.is_freeze === 2 ? '已冻结' : '正常' }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建日期">
                        <template slot-scope="{row}">
                            {{ timeFormat(row.created_at) }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="{row}">
                            <el-button
                                type="text"
                                @click="onEditClick(row)">编辑</el-button>
                            <el-button
                                v-if="row.id !== 1" type="text"
                                @click="onDeleteClick(row)" class="red-color">删除</el-button>
                            <el-button
                                v-if="row.id !== 1" type="text"
                                @click="onDisabled(row)" :class="row.is_freeze === 1 ? 'red-color' : ''">
                                    {{ row.is_freeze === 1 ? '冻结' : '解冻' }}
                                </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <pagination
                    ref="pagination"
                    :currentPage="form.page"
                    :pageSize="form.size"
                    :handleCurrentChange="onCurrentChange"
                    :handlePageSizeChange="onPageSizeChange"
                    :totalElements="totalElements"
                ></pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Pagination from '@/components/base/Pagination';
import TimeFormats from '@/helpers/TimeFormats';
import AesCrypt from '@/helpers/AesCrypt';

export default {
    components: {
        Pagination,
    },
    data() {
        return {
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 10,
            },
            totalElements: 0,
        };
    },
    methods: {
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
        },
        onDialog() {
            this.visible = !this.visible;
        },
        onCurrentChange(val) {
            this.form.page = val;
            this.fetchData();
        },
        onPageSizeChange(val) {
            this.form.size = val;
            this.form.page = 1;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('administrator', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => this.loading = false);
        },
        onAddClick() {
            this.$router.push({
                name: 'AdminManage.Add',
            });
        },
        onEditClick({id}) {
            this.$router.push({
                name: 'AdminManage.Add',
                params: { id: id },
            });
        },
        onDeleteClick(row) {
            this.confirmBox('是否删除此管理员账号', `administrator/${row.id}`, '删除成功', 'delete');
        },
        onDisabled(row) {
            const status = row.is_freeze === 1;
            const text = row.is_freeze === 1 ? '冻结' : '解冻';
            this.confirmBox(`是否${text}此管理员账号`, `administrator/${row.id}/${status}`, `${text}成功`, 'put');
        },
        timeFormat(time) {
            return time ? new TimeFormats().convertTime('', time) : '';
        },
        showPlainPwd(plainPsw) {
            return plainPsw ? new AesCrypt().decryptCBC(plainPsw) : '';
        },
        confirmBox(tip, url, message, api, fn) {
            $ele.$confirm(tip, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API[api](url).then(res => {
                    $ele.$message.success(message);
                    this.fetchData();
                    if (fn) fn(res);
                }).finally(() => this.loading = false);
            }).catch(() => {});
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.age-range-list-page {
    .input-width {
        max-width: 300px;
    }

    .footer {
        height: 44px;
        background: #f7f7f7;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
}
</style>
